<clr-alert *ngIf="errorFlag" [clrAlertType]="'danger'">
	<div class="alert-item">{{alertMessage}}</div>
</clr-alert>
<clr-alert *ngIf="successFlag" [clrAlertType]="'success'">
	<div class="alert-item">{{alertMessage}}</div>
</clr-alert>
<clr-dropdown>
	<button type="button" class="btn btn-sm btn-secondary" clrDropdownTrigger>
		<clr-icon shape="plus"></clr-icon> Monitoring Tool <clr-icon shape="caret down"></clr-icon>
	</button>
	<clr-dropdown-menu *clrIfOpen>
		<button type="button" (click)="populateWavefrontForm(wavefrontDefaultValues);wavefrontModal=true;addEdit='Add';"
			clrDropdownItem>Wavefront</button>
		<button type="button" (click)="populateDatadogForm(datadogDefaultValues);datadogModal=true;addEdit='Add';"
			clrDropdownItem>Datadog</button>
	</clr-dropdown-menu>
</clr-dropdown>&nbsp;&nbsp;
<button class="btn btn-sm btn-link" [clrLoading]="collectionBtnState" (click)="updateMetricCollectionStatus();"
	[disabled]="metricProviderList.length == 0">
	<input type="radio" name="metricColl" [checked]="metricCollectionStatus" /> Send Metrics
</button>
<clr-datagrid [clrDgLoading]="isLoading">
	<clr-dg-column>Name</clr-dg-column>
	<clr-dg-column>Type</clr-dg-column>
	<clr-dg-column>Enabled</clr-dg-column>
	<clr-dg-column>Instance</clr-dg-column>
	<clr-dg-row *clrDgItems="let mp of metricProviderList" [clrDgItem]="mp">
		<clr-dg-action-overflow>
			<button class="action-item" (click)="populateWavefrontForm(mp);wavefrontModal=true;addEdit='Edit';"
				*ngIf="mp.metricProviderType == 'WAVEFRONT'">Edit</button>
			<button class="action-item" (click)="populateDatadogForm(mp);datadogModal=true;addEdit='Edit';"
				*ngIf="mp.metricProviderType == 'DATADOG'">Edit</button>
			<button class="action-item" (click)="deleteMetricProvider(mp);">Delete</button>
		</clr-dg-action-overflow>
		<clr-dg-cell>{{mp.name}}</clr-dg-cell>
		<clr-dg-cell>{{mp.metricProviderType}}</clr-dg-cell>
		<clr-dg-cell>
			<input type="radio" name="mp.name" [checked]="mp.isActive" (click)="updateMetricProviderStatus(mp);" />
		</clr-dg-cell>
		<clr-dg-cell>
			<span *ngIf="mp.metricProviderType == 'DATADOG'">https://app.datadoghq.com</span>
			<span
				*ngIf="mp.metricProviderType == 'WAVEFRONT'">{{mp.waveFrontConnectionProperties.wavefrontInstance}}</span>
		</clr-dg-cell>
	</clr-dg-row>
	<clr-dg-footer>
		<clr-dg-pagination #pagination [clrDgPageSize]="10">
			<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Monitoring tools info</clr-dg-page-size>
			{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} providers
		</clr-dg-pagination>
	</clr-dg-footer>
</clr-datagrid>
<clr-modal [(clrModalOpen)]="wavefrontModal" [clrModalClosable]="false">
	<h3 class="modal-title">{{addEdit}} Wavefront</h3>
	<div class="modal-body" *ngIf="wavefrontFormData">
		<clr-alert *ngIf="testErrorFlag" [clrAlertType]="'danger'">
			<div class="alert-item">{{testAlertMessage}}</div>
		</clr-alert>
		<clr-alert *ngIf="testSuccessFlag" [clrAlertType]="'success'">
			<div class="alert-item">{{testAlertMessage}}</div>
		</clr-alert>
		<form #wavefrontForm="ngForm" #nativeWavefrontForm (ngSubmit)="addOrUpdateMetricProviders(wavefrontForm.value);wavefrontModal=false;wavefrontForm.reset();" ngNativeValidate>
			<section class="form-block">
				<div class="form-group">
					<input type="text" name="id" [(ngModel)]="wavefrontFormData.id" [hidden]="true">
				</div>
				<div class="form-group">
					<input type="text" name="metricProviderType" [(ngModel)]="wavefrontFormData.metricProviderType"
						[hidden]="true">
				</div>
				<div class="form-group">
					<label for="name">Name</label>
					<input type="text" name="name" pattern="^[A-Za-z0-9-_.]+$"
						title="alphanumeric and special characters (_ - .) are allowed"
						[(ngModel)]="wavefrontFormData.name" [required]="addEdit == 'Add'"
						[readonly]="addEdit == 'Edit'">
				</div>
				<fieldset ngModelGroup="waveFrontConnectionProperties">
					<div class="form-group">
						<label for="wavefrontInstance">Wavefront Instance</label>
						<input type="text" placeholder="https://0.0.0.0" name="wavefrontInstance"
							[(ngModel)]="wavefrontFormData.waveFrontConnectionProperties.wavefrontInstance" required>
					</div>
					<div class="form-group">
						<label for="wavefrontAPIToken">Wavefront API Token</label>
						<input type="text" name="wavefrontAPIToken"
							[(ngModel)]="wavefrontFormData.waveFrontConnectionProperties.wavefrontAPIToken" required>
					</div>
					<div class="form-group">
						<label for="source">Source</label>
						<input type="text" name="source"
							[(ngModel)]="wavefrontFormData.waveFrontConnectionProperties.source" required>
					</div>
					<div class="form-group">
						<label for="tags">Static Tags</label>
						<span class="label label-info"
							*ngFor="let item of tagsData | keyvalue">{{item.key}}={{item.value}}&nbsp;<clr-icon
								shape="times" size="12" (click)="removeStaticTag(item.key);"></clr-icon></span>
						<clr-icon shape="plus-circle" (click)="staticTagsModal=true;" style="width:21px;height:30px;">
						</clr-icon>
					</div>
				</fieldset>
			</section>
			<button type="button" class="btn btn-outline"
				(click)="wavefrontModal=false;wavefrontForm.reset();ngOnInit();">CANCEL</button>
			<button type="button" class="btn btn-outline" [clrLoading]="testBtnState"
				(click)="testConnection(nativeWavefrontForm.reportValidity(), wavefrontForm.value);">TEST
				CONNECTION</button>
			<button type="submit" class="btn btn-primary" [disabled]="!testSuccessFlag">SUBMIT</button>
		</form>
	</div>
</clr-modal>
<clr-modal [(clrModalOpen)]="datadogModal" [clrModalClosable]="false">
	<h3 class="modal-title">{{addEdit}} Datadog</h3>
	<div class="modal-body" *ngIf="datadogFormData">
		<clr-alert *ngIf="testErrorFlag" [clrAlertType]="'danger'">
			<div class="alert-item">{{testAlertMessage}}</div>
		</clr-alert>
		<clr-alert *ngIf="testSuccessFlag" [clrAlertType]="'success'">
			<div class="alert-item">{{testAlertMessage}}</div>
		</clr-alert>
		<form #datadogForm="ngForm" #nativeDatadogForm (ngSubmit)="addOrUpdateMetricProviders(datadogForm.value);datadogModal=false;datadogForm.reset();" ngNativeValidate>
			<section class="form-block">
				<div class="form-group">
					<input type="text" name="id" [(ngModel)]="datadogFormData.id" [hidden]="true">
				</div>
				<div class="form-group">
					<input type="text" name="metricProviderType" [(ngModel)]="datadogFormData.metricProviderType"
						[hidden]="true">
				</div>
				<div class="form-group">
					<label for="name">Name</label>
					<input type="text" name="name" pattern="^[A-Za-z0-9-_.]+$"
						title="alphanumeric and special characters (_ - .) are allowed"
						[(ngModel)]="datadogFormData.name" [required]="addEdit == 'Add'" [readonly]="addEdit == 'Edit'">
				</div>
				<fieldset ngModelGroup="datadogConnectionProperties">
					<div class="form-group">
						<label for="apiKey">Api Key</label>
						<input type="text" name="apiKey"
							[(ngModel)]="datadogFormData.datadogConnectionProperties.apiKey" required>
					</div>
					<div class="form-group">
						<label for="applicationKey">Application Key</label>
						<input type="text" name="applicationKey"
							[(ngModel)]="datadogFormData.datadogConnectionProperties.applicationKey" required>
					</div>
					<div class="form-group">
						<label for="tags">Static Tags</label>
						<span class="label label-info"
							*ngFor="let item of tagsData | keyvalue">{{item.key}}={{item.value}}&nbsp;<clr-icon
								shape="times" size="12" (click)="removeStaticTag(item.key);"></clr-icon></span>
						<clr-icon shape="plus-circle" (click)="staticTagsModal=true;" style="width:21px;height:30px;">
						</clr-icon>
					</div>
				</fieldset>
			</section>
			<button type="button" class="btn btn-outline"
				(click)="datadogModal=false;datadogForm.reset();ngOnInit();">CANCEL</button>
			<button type="button" class="btn btn-outline" [clrLoading]="testBtnState"
				(click)="testConnection(nativeDatadogForm.reportValidity(), datadogForm.value);">TEST
				CONNECTION</button>
			<button type="submit" class="btn btn-primary" [disabled]="!testSuccessFlag">SUBMIT</button>
		</form>
	</div>
</clr-modal>
<clr-modal [(clrModalOpen)]="staticTagsModal" [clrModalSize]="'lg'">
	<h3 class="modal-title">Add Static Tags</h3>
	<div class="modal-body">
		<form #staticTagsForm="ngForm"
			(ngSubmit)="updateStaticTags(staticTagsForm.value);staticTagsModal=false;staticTagsForm.reset();">
			<section class="form-block">
				<div class="form-group">
					<label for="tagKey">Key</label>
					<input type="text" name="tagKey" ngModel>
				</div>
				<div class="form-group">
					<label for="tagValue">Value</label>
					<input type="text" name="tagValue" ngModel>
				</div>
			</section>
			<button type="button" class="btn btn-outline" (click)="staticTagsModal=false;">CANCEL</button>
			<button type="submit" class="btn btn-primary">ADD</button>
		</form>
	</div>
</clr-modal>